<template>
  <view
    id="main"
    ref="main"
    class="x-white-bg x-flexp-jcai x-flex-column"
  >
    <canvas
      v-show="content&&size"
      canvas-id="qrcode"
      :style="{width: size-margin-margin+'px', height: size-margin-margin+'px'}"
    />
    <view
      v-if="showContent"
      class="x-ma x-fs-lg"
    >
      {{ content }}
    </view>
  </view>		
</template>

<script>
  import { getComponentSize } from '../../utils/utils'
  import uQRCode from './uqrcode.js' 
  export default {
    props: {
      content: {
        type: String,
        default: '',
      },
      showContent: {
        type: Boolean,
        default: false,
      },
      margin: {
        type: Number,
        default: 10,
      }
    },
    data() {
      return {
        size: 0,
      }
    },
    watch: {
      content: {
        handler() {
          this.makeQrcode()
        },
        immediate: true,
      }
    },
    mounted() {
      getComponentSize('main', this).then(size=>{
        this.size = size.width||200
        this.makeQrcode()
      })
    },
    methods: {				
      makeQrcode() {
        if(!this.content||!this.size) return

        uQRCode.make({
          canvasId: 'qrcode',
          componentInstance: this,
          text: this.content,
          size: this.size - 2*this.margin,
          margin: 0,
          backgroundColor: '#ffffff',
          foregroundColor: '#000000',
          fileType: 'jpg',
          errorCorrectLevel: uQRCode.errorCorrectLevel.H,
          success: res => {}
        })
      }
    }
  }
</script>

<style>
</style>